<template>
  <div id="attr-area">
    <h3>{{component.name}}</h3>
    <el-form label-width="80px"
             label-position="top"
             :model="attributes">
      <el-form-item v-for="attr in component.attributesConfig"
                    :key="attr.name"
                    :label="attr.cname">
        <component :is="attr.inputType"
                   v-model="attributes[attr.name]"
                   @change="attrChange(attr.name,attributes[attr.name],component.id)">
          <el-option v-for="option in attr.options"
                     :key="option"
                     :label="option"
                     :value="option">
          </el-option>
        </component>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { ref, getCurrentInstance } from 'vue';

export default {
  setup () {
    const component = ref({});
    const attributes = ref({});
    const internalInstance = getCurrentInstance();
    internalInstance.ctx.$mitt.on('chooseComp', (comp) => {
      component.value = comp;
      attributes.value = comp.attributes;
    });
    function attrChange (attrName, value, id, parentId) {
      const params = {
        attrName,
        value,
        id,
        parentId,
      };
      internalInstance.ctx.$mitt.emit('attrChange', params);
    }

    return {
      component,
      attributes,
      attrChange,
    };
  },
};
</script>

<style lang="scss" scoped>
#attr-area {
  padding: 10px;
  text-align: left;
  height: calc(100vh - 60px);
  box-sizing: border-box;
  ::v-deep .el-form-item__label {
    padding: 0;
    line-height: 20px;
  }
}
</style>
